<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="80px" size="1000px">
        <el-form-item label="*学科">
          <el-select v-model="form.subiectID" placeholder="请选择">
            <el-option
            v-for="item in subjectName"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*目录">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
            v-for="item in directoryName"
            :key="item.id"
            :label="item.directoryName"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*企业">
          <el-select v-model="form.enterpriseID" placeholder="请选择">
            <el-option
            v-for="item in companyName"
            :key="item.id"
            :label="item.company"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*城市" class="city">
          <el-col :span="5">
            <el-select
            v-model="form.city.citys"
            placeholder="请选择"
            @change="provincesChange">
              <el-option
              v-for="item in provinces"
              :key="item"    
              :label="item"
              :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select v-model="form.city.area" placeholder="请选择">
              <el-option
              v-for="item in area"
              :key="item"
              :label="item"
              :value="item">
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="*方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
            v-for="item in direction"
            :key="item"
            :label="item"
            :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="*题型">
          <el-radio-group v-model="form.questionType">
            <el-radio label="单选" value="单选"></el-radio>
            <el-radio label="多选" value="多选"></el-radio>
            <el-radio label="简答" value="简答"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="*难度">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="简单" disabled></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="困难" disabled></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="30px" class="quill-editor-wrap">
          <span>*题干</span> 
          <quill-editor v-model="form.question"
          :options="editorOption">
          </quill-editor>
        </el-form-item>
        <el-form-item label="* 题干" v-if="form.questionType === '单选' ">
          <el-radio-group v-model="form.option">
            <el-col>
              <el-radio label="A">A
                <el-input></el-input>
              </el-radio>
            </el-col>
            <el-col>
              <el-radio label="B">B
                <el-input></el-input>
              </el-radio>
            </el-col>
            <el-col>
              <el-radio label="C">C
                <el-input></el-input>
              </el-radio>
            </el-col>
            <el-col>
              <el-radio label="D">D
                <el-input></el-input>
              </el-radio>
            </el-col>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="* 题干" v-if="form.questionType === '多选' ">
          <el-checkbox-group v-model="form.option">
            <el-col>
              <el-checkbox label="A" v>A
                <el-input></el-input>
              </el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox label="B">B
                <el-input></el-input>
              </el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox label="C">C
                <el-input></el-input>
              </el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox label="D">D
                <el-input></el-input>
              </el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="* 答案解析" class="quill-editor-wrap">
          <quill-editor v-model="form.answer"
          :options="editorOption2">
          </quill-editor>
        </el-form-item>
        <el-form-item label="* 题目备注">
          <el-input
            type="textarea"
            :rows="4"
            size="medium"
            placeholder="请输入内容"
            v-model="form.remarks">
          </el-input>
        </el-form-item>
        <el-form-item label="* 试题标签">
          <el-input placeholder="请输入" v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onReset">取消</el-button>
        </el-form-item>
      </el-form>
       
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { list as subjectsList } from '@/api/hmmm/subjects.js'
import { list as directorysList } from '@/api/hmmm/directorys.js'
import { list as companysList } from '@/api/hmmm/companys.js'
import { add } from '@/api/hmmm/questions.js'
import { direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'QuestionsNew',
  components: {
    quillEditor
  },
  data() {
    return {
      form: {
        subiectID: null,
        catalogID: null,
        enterpriseID: '',
        city: {
          citys: '',
          area: ''
        },
        direction: '',
        questionType: '单选',
        difficulty: '一般',
        question: '',
        option: [
          {
            code: '',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: '',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: '',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: '',
            title: '',
            img: '',
            isRight: false
          }
        ],
        answer: '',
        remarks: '',
        tags: ''
      },
      editorOption: {},
      editorOption2: {},
      requestParameters: { // 默认参数
        page: 1,
        pagesize: 10
      },
      subjectName: [],
      directoryName: [],
      companyName: [],
      provinces: [],
      area: [],
      direction: direction
    }
  },
  created () {
    this.getSubjects()
    this.getDirectory()
    this.getCompanys()
  },
  computed: {

  },
  methods: {
    async onSubmit() {
      // const city = this.form.city.citys + this.form.city.area 
      // this.form.city = city
      const data = await add(this.form)
    },
    onReset () {
      
      console.log(this.form.city)
    },

    // 学科列表
    async getSubjects () {
      const res = await subjectsList()
      this.subjectName = res.data.items
      this.provinces = provinces()
    },

    // 目录列表
    async getDirectory () {
      const res = await directorysList()
      this.directoryName = res.data.items
    },

    // 企业列表
    async getCompanys () {
      const res = await companysList()
      this.companyName = res.data.items
    },

    // 城市地址
    provincesChange () {
      this.area = citys(this.form.city.citys)
      this.form.city.area = this.area[0]
    },

    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 500px;
}
.city .el-select {
  width: 240px;
}
.quill-editor-wrap {
  height: 320px;
}
.quill-editor {
  width: 90%;
  height: 200px;
}
</style>
